<template>
  <el-form
    :model="dynamicValidateForm"
    ref="dynamicValidateForm"
    label-width="100px"
    class="demo-dynamic"
  >
    <el-form-item prop="mainSort" label="主要关键字">
      <el-select v-model="dynamicValidateForm.mainSort.field" placeholder="请选择排序项">
        <el-option
          v-for="item in iSortArray"
          :key="item.value"
          :label="item.key"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="dynamicValidateForm.mainSort.way" placeholder="请选择排序方式">
        <el-option
          v-for="item in iSortSelect"
          :key="item.value"
          :label="item.key"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      v-for="(domain, index) in dynamicValidateForm.domains"
      :label="'次要关键字' + index"
      :key="domain.key"
      :prop="'domains.' + index + '.value'"
    >
      <el-select v-model="domain.field" placeholder="请选择排序项">
        <el-option
          v-for="item in iSortArray"
          :key="item.value"
          :label="item.key"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="domain.way" placeholder="请选择排序方式">
        <el-option
          v-for="item in iSortSelect"
          :key="item.value"
          :label="item.key"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button @click.prevent="removeDomain(domain)">删除</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('dynamicValidateForm')">排序</el-button>
      <el-button @click="addDomain">新增排序项</el-button>
      <el-button @click="closeSort">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
</style>

<script>
/**
 * @params sortArray = []  //  排序字段
 * @params sortSelect = []  // 排序方式
 */
export default {
  name: 'zSort',
  props: {
    sortArray: {
      // 排序字段
      type: Array,
      default: []
    },
    sortSelect: {
      //  排序方式
      type: Array,
      default: []
    }
  },
  data() {
    return {
      iSortArray: this.sortArray,
      iSortSelect: this.sortSelect,
      dynamicValidateForm: {
        domains: [
          {
            field: '',
            way: ''
          }
        ],
        mainSort: {
          field: '',
          way: ''
        }
      }
    }
  },
  beforeMount() {
    console.log(this.iSortArray)
    console.log(this.iSortSelect)
  },
  mounted() {
    console.log(this.iSortArray)
    console.log(this.iSortSelect)
  },
  methods: {
    submitForm(formName) {
      console.log(this.dynamicValidateForm)
      this.$emit('submitSort', this.dynamicValidateForm)
    },
    closeSort() {
      this.$emit('isClose')
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        field: '',
        way: '',
        key: Date.now()
      })
    }
  }
}
</script>
